// 确保frame-sdk.js已加载
// 导入配置管理模块
import configManager from './config.js';

// 全局变量
let currentPage = 'home';
let isAnimating = false;
const transitionDuration = 300; // 过渡动画时长（毫秒）
const iframes = {}; // 存储所有iframe引用
// 从配置管理器初始化页面设置并暴露到window对象
let pageSettings = configManager.getAll();
window.pageSettings = pageSettings;

document.addEventListener('DOMContentLoaded', () => {
    const appContent = document.querySelector('.app-content');
    const navItems = document.querySelectorAll('.nav-item');
    const appHeader = document.querySelector('.app-header');
    
    // 配置已在全局初始化
    
    initFrameSDK();
    
    // 当前激活的iframe
    let currentFrame = null;
    // iframe缓存对象，保存每个页面的iframe实例
    let iframeCache = {};
    
    // 处理设置更新
    function handleSettingsUpdate(settings) {
        // 更新页面元素
        document.body.classList.toggle('dark-theme', settings.theme === 'dark');
        
        // 更新meta theme-color
        const metaThemeColor = document.querySelector('meta[name="theme-color"]');
        metaThemeColor.content = settings.theme === 'dark' ? '#1e1e1e' : '#007bff';
        
        // 语言由i18n模块自动处理
        if (window.i18n) {
            i18n.setLanguage(settings.language);
            i18n.updateAllElements();
        }
        
        // 通知所有缓存的iframe更新设置
        Object.values(iframeCache).forEach(frame => {
            try {
                frame.contentWindow.postMessage({
                    type: 'SETTINGS_UPDATE',
                    settings: settings
                }, '*');
            } catch (e) {
                console.warn('更新iframe设置失败:', e);
            }
        });
    }
    
    // 初始化第一个iframe
    function initFirstFrame() {
        // 初始化首页iframe并加入缓存
        const homeUrl = '/plugin/home/index.html';
        const firstFrame = createCachedIframe(homeUrl);
        firstFrame.id = 'contentFrame';
        firstFrame.classList.add('active');
        appContent.appendChild(firstFrame);
        currentFrame = firstFrame;
        
        // 设置会在iframe加载完成时通过addChildFrame自动发送
    }
    
    // 创建或获取缓存的iframe
    function createCachedIframe(url) {
        // 如果已存在缓存的iframe，直接返回
        if (iframeCache[url]) {
            console.log('已存在缓存的iframe:', url);
            return iframeCache[url];
        }
        
        // 创建新iframe并缓存
        const iframe = createFullScreenIframe(url);
        
        iframeCache[url] = iframe;
        return iframe;
    }
    // 创建全屏iframe的辅助函数 - 兼容所有主流浏览器
    function createFullScreenIframe(src) {
        const iframe = document.createElement('iframe');
        
        // 设置基本属性
        iframe.src = src;
        iframe.frameBorder = '0';
        iframe.allowFullscreen = true;
        
        // 关键优化：避免在JS中重复设置样式，主要依赖CSS控制
        // 只设置必要的样式，其余通过CSS类控制
        Object.assign(iframe.style, {
            position: 'absolute',
            top: '0',
            left: '0',
            width: '100%',
            height: '100%',
            border: 'none'
        });
        
        // 监听iframe加载完成事件，确保内容完全加载后再处理
        iframe.addEventListener('load', () => {
            requestAnimationFrame(() => {
                forceResize(iframe);
            });
            
            // 使用SDK添加子框架
            if (window.appSDK) {
                window.appSDK.addChildFrame(iframe);
            } else {
                console.warn('appSDK尚未初始化');
            }
        });
        
        return iframe;
    }
    
    // 强制调整iframe尺寸 - 优化版本，避免不必要的重排
    function forceResize(iframe) {
        // 避免对已卸载的iframe操作
        if (!iframe || !iframe.parentNode) return;
        
        // 关键优化：直接设置最终尺寸，避免0尺寸引起的重排抖动
        const appContentRect = appContent.getBoundingClientRect();
        
        // 使用CSS变量传递尺寸，减少直接操作style属性
        appContent.style.setProperty('--iframe-width', `${appContentRect.width}px`);
        appContent.style.setProperty('--iframe-height', `${appContentRect.height}px`);
        
        // 直接设置尺寸，避免过渡动画
        Object.assign(iframe.style, {
            width: `${appContentRect.width}px`,
            height: `${appContentRect.height}px`,
            transition: 'none' // 确保尺寸变化没有动画
        });
        
        // 强制重排以确保尺寸生效
        iframe.offsetHeight;
        
        // 恢复过渡效果
        requestAnimationFrame(() => {
            if (iframe && iframe.parentNode) {
                iframe.style.transition = '';
            }
        });
    }
    
    // 设置窗口大小变化监听 - 优化版本，更高效地处理缓存iframe
    function setupResizeHandler() {
        let resizeTimeout;
        window.addEventListener('resize', () => {
            // 节流处理，避免频繁调整
            clearTimeout(resizeTimeout);
            resizeTimeout = setTimeout(() => {
                // 获取新的容器尺寸
                const appContentRect = appContent.getBoundingClientRect();
                
                // 关键优化：批量更新所有缓存的iframe尺寸
                Object.values(iframeCache).forEach(iframe => {
                    if (iframe && iframe.parentNode) {
                        // 使用更高效的尺寸更新方法
                        Object.assign(iframe.style, {
                            width: `${appContentRect.width}px`,
                            height: `${appContentRect.height}px`
                        });
                    }
                });
                
                // 确保当前活动iframe尺寸正确
                if (currentFrame) {
                    forceResize(currentFrame);
                }
            }, 50); // 50ms的节流时间
        });
    }
    
    // 初始化
    initFirstFrame();
    setupResizeHandler();
    
    // 导航菜单点击事件
    navItems.forEach(item => {
        item.addEventListener('click', () => {
            // 移除所有active状态
            navItems.forEach(i => i.classList.remove('active'));
            // 添加当前active状态
            item.classList.add('active');
            
            // 根据不同的导航项加载不同的内容
            const id = item.id;
            let url = '';
            
            // 页面标题映射
            const titleMap = {
                'nav-home': '首页',
                'nav-control': '控制',
                'nav-ai': 'AI',
                'nav-discovery': '发现',
                'nav-mine': '我的'
            };
            
            switch(id) {
                case 'nav-home':
                    url = '/plugin/home/index.html';
                    break;
                case 'nav-control':
                    url = '/plugin/control/index.html';
                    break;
                case 'nav-ai':
                    url = '/plugin/ai/index.html';
                    break;
                case 'nav-discovery':
                    url = '/plugin/discovery/index.html';
                    break;
                case 'nav-mine':
                    url = '/plugin/mine/index.html';
                    break;
            }
            
            // 立即设置临时标题，避免等待插件页面消息
            if (titleMap[id]) {
                const tempTitle = titleMap[id];
                document.title = tempTitle + ' - VR-IoT';
                const headerTitle = document.querySelector('.app-header h1');
                if (headerTitle) {
                    headerTitle.textContent = tempTitle;
                }
            }
            
            // 使用抽屉动画切换页面
            slideToPage(url);
        });
    });
    
    // 抽屉滑动切换页面 - 优化的缓存机制，确保渲染状态保留
    function slideToPage(url) {
        // 如果当前URL与要加载的URL相同，则不执行切换
        if (currentFrame && currentFrame.src.endsWith(url)) {
            return;
        }
        
        // 获取或创建iframe（使用缓存）
        let newFrame = createCachedIframe(url);
        
        // 确保appContent容器尺寸正确
        const appContentRect = appContent.getBoundingClientRect();
        
        // 如果iframe尚未添加到DOM，添加它
        if (!newFrame.parentNode) {
            // 先添加到DOM，但保持不可见状态
            appContent.appendChild(newFrame);
            // 强制尺寸设置
            forceResize(newFrame);
        }
        
        // 重置动画类
        if (currentFrame) {
            currentFrame.classList.remove('active', 'slide-in');
        }
        newFrame.classList.remove('active', 'slide-in', 'slide-out');
        
        // 使用requestAnimationFrame确保动画流畅
        requestAnimationFrame(() => {
            // 关键优化：确保动画顺序正确
            // 1. 先激活新iframe并设置为slide-in状态
            newFrame.classList.add('slide-in');
            
            // 2. 然后让当前iframe滑出
            if (currentFrame) {
                currentFrame.classList.add('slide-out');
            }
            
            // 3. 动画开始后立即激活新iframe
            setTimeout(() => {
                newFrame.classList.remove('slide-in');
                newFrame.classList.add('active');
                
                // 确保新iframe已经通过SDK注册，设置会自动发送
                forceResize(newFrame);
            }, 50);
            
            // 动画结束后清理
            setTimeout(() => {
                if (currentFrame) {
                    // 只移除动画类，保留DOM元素（关键：保持渲染状态）
                    currentFrame.classList.remove('slide-out');
                }
                currentFrame = newFrame;
                
                // 提前传递当前设置给新iframe，避免语言闪烁
                const latestSettings = configManager.getAll();
                if (newFrame.contentWindow) {
                    try {
                        newFrame.contentWindow.postMessage({
                            type: 'PRELOAD_SETTINGS',
                            settings: latestSettings
                        }, '*');
                    } catch (e) {
                        console.warn('预加载设置失败:', e);
                    }
                }
                
                // 页面切换完成后，强制刷新当前页面的标题
                switchPage(url);
            }, 300);
        });
    }
    
    // 获取当前设置（从SDK获取）
    function getCurrentSettings() {
        return window.appSDK?.currentSettings || {};
    }
    
    // 主框架不再需要手动监听message事件，SDK已经处理
    // 但可以添加额外的自定义消息处理
    function setupSDKListeners() {
        if (window.appSDK) {
            window.appSDK.on('CUSTOM_MESSAGE', (data) => {
                console.log('Received custom message:', data);
                // 处理自定义消息
            });
            
            // 监听设置更新事件
            window.appSDK.on('settingsUpdated', (settings) => {
                console.log('Settings updated:', settings);
            });
        }
    }
    
    // 全屏内容容器
    let fullscreenContainer = null;
    let fullscreenIframe = null;
    
    // 监听来自iframe的全屏内容请求
    function setupFullscreenContentListeners() {
        window.addEventListener('message', (event) => {
            if (event.data) {
                switch (event.data.type) {
                    case 'OPEN_FULLSCREEN_CONTENT':
                        if (event.data.url) {
                            openFullscreenContent(event.data.url);
                        }
                        break;
                    case 'CLOSE_FULLSCREEN_CONTENT':
                        closeFullscreenContent();
                        break;
                }
            }
        });
    }
    
    // 打开全屏内容
    function openFullscreenContent(url) {
        console.log('打开全屏内容:', url);
        
        // 如果已经有全屏内容，先关闭
        if (fullscreenContainer) {
            closeFullscreenContent();
        }
        
        // 创建全屏容器
        fullscreenContainer = document.createElement('div');
        fullscreenContainer.style.cssText = `
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background-color: transparent;
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        `;
        
        // 创建全屏iframe
        fullscreenIframe = document.createElement('iframe');
        fullscreenIframe.src = url;
        fullscreenIframe.style.cssText = `
            width: 100%;
            height: 100%;
            border: none;
            pointer-events: auto;
        `;
        fullscreenIframe.allowFullscreen = true;
        
        // 添加到DOM
        fullscreenContainer.appendChild(fullscreenIframe);
        document.body.appendChild(fullscreenContainer);
        
        // 触发动画
        setTimeout(() => {
            fullscreenContainer.style.opacity = '1';
        }, 10);
        
        // 隐藏底部导航
        const bottomNav = document.querySelector('.bottom-nav');
        if (bottomNav) {
            bottomNav.style.display = 'none';
        }
        
        // 隐藏头部导航
        const appHeader = document.querySelector('.app-header');
        if (appHeader) {
            appHeader.style.display = 'none';
        }
        
        // 禁用背景滚动
        document.body.style.overflow = 'hidden';
        
        // 预加载设置
        const latestSettings = configManager.getAll();
        setTimeout(() => {
            if (fullscreenIframe && fullscreenIframe.contentWindow) {
                try {
                    fullscreenIframe.contentWindow.postMessage({
                        type: 'PRELOAD_SETTINGS',
                        settings: latestSettings
                    }, '*');
                } catch (e) {
                    console.warn('预加载全屏内容设置失败:', e);
                }
            }
        }, 100);
    }
    
    // 关闭全屏内容
    function closeFullscreenContent() {
        console.log('关闭全屏内容');
        
        if (fullscreenContainer) {
            // 淡出动画
            fullscreenContainer.style.opacity = '0';
            
            setTimeout(() => {
                // 移除DOM元素
                if (fullscreenContainer.parentNode) {
                    fullscreenContainer.parentNode.removeChild(fullscreenContainer);
                }
                fullscreenContainer = null;
                fullscreenIframe = null;
                
                // 显示底部导航
                const bottomNav = document.querySelector('.bottom-nav');
                if (bottomNav) {
                    bottomNav.style.display = '';
                }
                
                // 显示头部导航
                const appHeader = document.querySelector('.app-header');
                if (appHeader) {
                    appHeader.style.display = '';
                }
                
                // 恢复背景滚动
                document.body.style.overflow = '';
            }, 300);
        }
    }
    
    // 在SDK初始化后设置监听器
    function initFrameSDK() {
        if (window.frameSDK) {
            // 配置主框架SDK，设置为isMainFrame=true
            window.frameSDK.isMainFrame = true;
            window.frameSDK.onSettingsUpdate = handleSettingsUpdate;
            window.frameSDK.init();
            // 别名保留向后兼容
            window.appSDK = window.frameSDK;
            // 设置监听器
            setupSDKListeners();
            // 设置全屏内容监听器
            setupFullscreenContentListeners();
        } else {
            // 如果frameSDK未加载，延迟重试
            setTimeout(initFrameSDK, 100);
        }
    }
    
    // 切换页面时强制更新标题
    function switchPage(page) {
        // 确保当前显示的iframe能获取到最新标题
        setTimeout(() => {
            if (currentFrame && currentFrame.contentWindow) {
                try {
                    // 触发iframe内的标题更新
                    currentFrame.contentWindow.postMessage({
                        type: 'REFRESH_TITLE'
                    }, '*');
                } catch (e) {
                    console.warn('刷新页面标题失败:', e);
                }
            }
        }, 50); // 减少延迟，加快标题更新
    }
        
        // 广播设置给所有iframe
        if (window.appSDK) {
            window.appSDK.broadcastSettings();
        }
    
    // 保存设置到配置管理器
      function saveSettings() {
          if (appSDK && appSDK.currentSettings) {
              configManager.setMultiple(appSDK.currentSettings);
          }
      }
    
    // 从配置管理器加载设置
      function loadSettings() {
          const savedSettings = configManager.getAll();
          if (Object.keys(savedSettings).length > 0) {
            try {
                if (appSDK) {
                    // 更新SDK设置
                    Object.assign(appSDK.currentSettings, savedSettings);
                    
                    // 应用设置
                    document.body.classList.toggle('dark-theme', appSDK.currentSettings.theme === 'dark');
                    
                    // 广播设置给所有子框架
                    appSDK.broadcastSettings();
                }
                
                // 更新全局页面设置引用
                 window.pageSettings = savedSettings;
            } catch (e) {
                console.error('Error loading settings:', e);
            }
        }
    }
    
    // 更新主题的核心函数
    function updateTheme(theme) {
        if (appSDK) {
            // 使用SDK的changeTheme方法
            appSDK.changeTheme(theme);
            
            // 应用主题到主框架
            document.body.classList.toggle('dark-theme', theme === 'dark');
            
            // 更新meta theme-color
            const metaThemeColor = document.querySelector('meta[name="theme-color"]');
            metaThemeColor.content = theme === 'dark' ? '#1e1e1e' : '#007bff';
            
            // 保存设置
            saveSettings();
        }
    }
    
    // 更新语言的核心函数
    function updateLanguage(language) {
        if (appSDK && window.i18n) {
            // 使用SDK的changeLanguage方法
            appSDK.changeLanguage(language);
            
            // 保存设置
            saveSettings();
        }
    }
    
    // 初始化 - 检测系统主题偏好
    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
        if (window.appSDK) {
            updateTheme('dark');
        }
    }
    
    // 监听系统主题变化
    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
        updateTheme(e.matches ? 'dark' : 'light');
    });
    
    // 模拟主题切换按钮（可以在未来的UI中实现）
    // 这里预留一个全局函数供iframe调用
    window.toggleTheme = () => {
        if (window.appSDK && window.appSDK.currentSettings) {
            const newTheme = window.appSDK.currentSettings.theme === 'light' ? 'dark' : 'light';
            updateTheme(newTheme);
        }
    };
    
    // 模拟语言切换按钮（可以在未来的UI中实现）
    window.toggleLanguage = () => {
        if (appSDK) {
            const newLanguage = appSDK.currentSettings.language === 'zh-CN' ? 'en-US' : 'zh-CN';
            updateLanguage(newLanguage);
        }
    };
    
    // 设置导航菜单项的data-i18n属性
    document.querySelectorAll('.nav-item').forEach((item, index) => {
        const navKeys = ['nav.home', 'nav.control', 'nav.ai', 'nav.discovery', 'nav.mine'];
        if (item.querySelector('.nav-text')) {
            item.querySelector('.nav-text').setAttribute('data-i18n', navKeys[index]);
        }
    });
    
    // 页面初始化完成后加载设置
    loadSettings();
});